<template>
  <mt-popup v-model="popupVisible" position="right" style="width:100%;height:100%">
    <div class="page payMoney">
      <div class="scroll-view">
        <customHeader middleTitle="向商家付款" :jsBridgeBack="false" @leftCallBack="handleBack" />
        <div class="page-body">
          <div class="storeBox">
            <div class="storeName">
              <div class="imgBox">
                <img :src="info['storeLogo']" alt />
              </div>
              <p>{{shopName}}</p>
            </div>
            <div class="addRemark">添加备注</div>
          </div>
          <ul class="setMoneyList">
            <template v-for="(item,index) in info.list">
            <li :key="index" v-if="item.isDelete!=1">
              <div class="setMoneyContent">
                <p>{{item.payContent?item.payContent:'填写的收款内容'}}</p>
                <p v-if="item.payAmount"><span class="text-bold">¥{{item.payAmount}}</span>/份</p>
                <p class="text-bold" v-else>设置的金额</p>
              </div>
              <div class="addSubtractFrame">
                <div class="num-box">
                  <i class="zhk-js disabledClass"></i>
                  <div class="buy-num">{{item['fenshu']?item['fenshu']:'0'}}</div>
                  <i class="zhk-zj disabledClass"></i>
                </div>
              </div>
            </li>
            </template>
          </ul>
        </div>
        <div class="kxf">
          <div>
            <img :src="kxfImg" alt />
          </div>
          <span>千万优质商家的选择</span>
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Popup } from "mint-ui";
Vue.component(Popup.name, Popup);

export default {
  name: "payMoney",
  data() {
    return {
      popupVisible: false,
      kxfImg: require("../../../static/images/kuaixiangfu.png"),
      info: {
        storeLogo: require("../../../static/images/storeLogo.png"),
        list: [
          {
            gatheringContent: "",
            gatheringMoney: "",
            fenshu: ""
          }
        ]
      }
    };
  },
  props: {
    listData: {
      type: Array
    },
    shopName: {
      type: String
    }
  },
  watch: {
    listData: {
      handler(newVal, oldVal) {
        this.info['list'] = newVal;
      },
      deep: true
    },
  },
  methods: {
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      this.popupVisible = false;
    },
    handleBack() {
      this.popupHide();
    }
  },
  components: {
    customHeader
  }
};
</script>
<style lang='scss' scoped>
@import "getMoneyQrCode";
.text-bold {
  color: #333;
  font-weight: bold;
  @include remCalc(font-size, 36);
}
</style>
